import React ,{useState}from 'react'
function App() {
  const [data,setData]=useState([])
  const [value,setValue]=useState("")
  const btn=(e)=>{
    setValue(e.target.value);
    console.log(value);
  }
  const slice=(e)=>{
    let list=[...data];
    list.splice(e,1);
    setData(list)
    console.log(111);
  }
  const todo=()=>{
    let list=[...data];
    console.log(111);
    list.push(value);
    setData(list)
  }
  return (
    <div className="App">
      <header>
        <span>TodoList</span>
      </header>
      <main>
        <p><input type="text" value={value} onChange={btn}></input><button onClick={todo}>add</button></p>
        <div>
          <ul>
            {
                data&&data.map((item,i)=>{
                  return <li key={item}>
                    <input type="checkbox"></input>
                    <b>{item}</b>
                    <span onClick={()=>slice(i)}>X</span>
                  </li>
                })
            }
          </ul>
        </div>
      </main>
      <footer>
        <p>共有:{data.length}件事情</p>
        <p>已完成:1</p>
        <p>未完成:2</p>
      </footer>
    </div>
  );
}

export default App;
